<template>
    <div>
<el-dialog :title="titleDialogProp" :visible.sync="dialogFormVisible" :modal-append-to-body='false' v-if="dialogFormVisible" @close='close()'>
     <div class="dialog_input">
      <el-form :model="form">
        <el-row :gutter="2">
          <el-col :span="6">
            <el-form-item label="" prop="zgcmc">
              <el-select v-model="params.type" placeholder="社会矫正人员">
                <el-option v-for="(item,index) in table" :key="index" :label='item.name' :value="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
           <el-col :span="6">
          <el-form-item label="" prop="zgcmc">
            <el-select v-model="form.name" placeholder="组织结构">
            </el-select>
          </el-form-item>
          </el-col>
           <el-col :span="6">
          <el-form-item label="" prop="zhtbh">
            <el-input placeholder="重点服务人员姓名" v-model="params.name"></el-input>
          </el-form-item>
          </el-col>
     
             <el-col :span="6">
            <el-form-item style="margin-top:0;">
              <el-button type="info" @click="seach">查 询</el-button>
           
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="tableBox test-1">
      <el-table :data="tableData" style="width:100%" stripe v-loading="tableLoading">
        <el-table-column type="index" label="序号" width="90" :index="indexSort"></el-table-column>
        <el-table-column prop="qu" label="区/县名称" width="123"  show-overflow-tooltip>历下区</el-table-column>
        <el-table-column prop="communityName" label="街道名称"  width="123" show-overflow-tooltip></el-table-column>
        <el-table-column prop="gridCode" label="类型" width="110" show-overflow-tooltip></el-table-column>
        <el-table-column prop="type" label="姓名" ></el-table-column>
        <el-table-column prop="sex" label="性别">{{sex=1?'男':'女'}}</el-table-column>
          <el-table-column prop="address" label="居住地" width="110" show-overflow-tooltip></el-table-column>
           <el-table-column prop="dw" label="定位" ></el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
    </div>
      </div>
    </el-dialog>
    </div>
</template>

<script>
import {tableDateFW} from '@/api/index.js'


export default {
    data(){
        return{
    dialogFormVisible:false,
    titleDialogProp:'',
     current:1,
    
       formLabelWidth: 100,
      tableLoading:false,
      arrs:[],
      params:{
        name:'',
        type:"",
        gridCode:370102,
        page:1,
        size:10
      },
      total:0,
      
      
form:{
    name:'',
    region:"",
},
tableData:[],
table:[],
        }
    },
      
    watch:{
       isShow(val){
           
           console.log(val,'1258')
          this.dialogFormVisible=val
       },
       titleDialog(val){
           this.titleDialogProp=val
       }
    },
  mounted(){
    this.tableDatas()
    },
    methods:{
      async tableDatas(){
        console.log('123');
      try {
        const {data}  = await tableDateFW(this.params)
        console.log(data)
        this.tableData=data.date.data.list
        this.table=data.date.dict.serviceStaffType
        this.total=data.date.data.total
        this.
        console.log(this.table);
       
      } catch (error) {
        console.log(error)
      }
   },
         indexSort(){},
  handleSizeChange(val){
            this.params.size=val
            this.tableDatas()
          },
    handleCurrentChange(val){
      this.params.page=val
            this.tableDatas()
    },
    close(){
      this.$emit('close',false)
    },
    seach(){
       this.tableDatas()
    }
    },
   
    props:{
        isShow:{
            type:Boolean,
            default:false
        },
        titleDialog:{
            type:String
        }
    }
}
</script>

<style>

</style>